<template>
	<view>
		<!-- 页头增高垫 -->
		<view style="height: 40rpx; background-color:#0aa1ed;"></view>
		<!-- 顶部搜索栏 -->
			<view class="search-bar">
				<uni-icons style="margin-left: 15rpx;" type="home-filled" color="#fff" size="30" @click="jumpToIndex"></uni-icons>
				<uni-search-bar :value="userInput" @clear="clearData" class="search" cancelButton="none" placeholder="请输入商品关键字" @confirm="beginSearch" 
				 @input="doInput"></uni-search-bar>
			</view>
		
		<!-- 搜索出来的列表 -->
		<view>
			 <uni-list v-for="item in searchData.data" :key="item.lid">
				
			 	<uni-list-item 
				ellipsis="1"
				clickable 
				showArrow 
				:title="item.title"  
				:thumb="$url.baseURL+item.pic"
			 	thumb-size="lg"
				link="navigateTo"
				:to="`/pages/product-details/product-details?pid=${item.lid}`"
				>
				</uni-list-item>
			 	
			</uni-list>
		</view>
	
		<!-- 搜索建议 -->
		<uni-card title="热门搜索" is-full>
			<view class="suggest-list" v-for="(item,i) in suggestList" :key="i">
				<uni-tag @click="tagSearch(item.name)" class="uni-tag" :text="item.name" :type="item.color" circle ></uni-tag>
			</view>
		</uni-card>
			
		
		<!-- 返回顶部组件 -->
		<xz-go-top bottom="30rpx"></xz-go-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchData:{},
				userInput:'',
				suggestList:[
				{name:'Apple',color:'primary'},
				{name:'游戏本',color:'success'},
				{name:'联想',color:'error'},
				{name:'影音本',color:'warning'},
				{name:'商务本',color:'primary'},
				{name:'MacBook',color:'default'},
				{name:'华硕',color:'primary'},
				{name:'轻薄本',color:'success'},
				{name:'工作站',color:'error'},
				{name:'雷神',color:'success'},
				{name:'联想小新 Pro6',color:'default'},
				],
				type:['primary','success','error','warning','default'],
				t:null,
			};
		},
		onLoad() {
			this.randType()
		},
		methods:{
			tagSearch(kw){
				this.userInput = kw //把标签中的文字放入搜索框
				this.beginSearch()  //调用搜索
			},
			doInput(e){
				console.log(e); //uni-searchBar 输入事件是当前输入的值
				this.userInput = e
				if(this.userInput==''){
					this.clearData()
				}
				if(this.t!==null){
					clearTimeout(t)
				}
				this.t = setTimeout(()=>{
					this.beginSearch()
				},500)
				this.t = null
			},
			clearData(){
				this.searchData=[]
			},
			beginSearch(){
				//trim函数去掉空格
				let kw = this.userInput.trim()
				if(!kw){
					uni.showToast({
						title:"尚未输入任何内容",
						icon:"none"
					})
					return
				}
				//用户输入了关键字，开始调用接口搜索数据库
				//trim函数：去掉所有空格
				 //console.log(this.userInput.trim());
				
				let url = this.$url.productList+"?kw="+kw
				uni.request({
					url:url,
					success:(res)=>{
						this.searchData = res.data
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						if(!this.searchData.data.length){
							uni.showToast({
								title:"没有查询到相关商品",
								icon:"none"
							})
						}
						
					}
				})
				
			},
			randType(){
				let n = Math.random()*this.type.length
				n = Math.floor(n)
				let t = Math.random()*this.suggestList.length
				t = Math.floor(t)
				for (var i = 0; i <this.suggestList.length; i++) {
				    this.suggestList[t].color = this.type[n]
				}
				//console.log(this.suggestList);
			},
			jumpToIndex(){
				// 无法跳转到switchBar
				// uni.redirectTo({
				// 	url:"pages/index/index"
				// })
				uni.reLaunch({
					url:"/pages/index/index"
				})
			},
		}
	}
</script>

<style lang="scss">
.search-bar{
	background-color: $xz-theme;
	padding: 0prx 20rpx;
	display: flex;
	align-items: center;
	.search{
		flex: 1;
		font-size: $uni-font-size-sm;
	}
}
.suggest-list{
	display: inline-block;
	margin: 5rpx 10rpx;
}

</style>
